<template>
  <div class="weui-vcode-btn smsMsg" @click="getSmsCode">
    {{smsMsg}}
  </div>
</template>

<script>
import $ from 'jquery'
window.jQuery = $
window.$ = $
export default {
  props: {
    off: Boolean
  },
  data () {
    return {
      smsMsg: '获取验证码',
      number: 0
    }
  },
  watch: {
    off: function (val) {
      this.getSmsCode()
    },
    number: function (val) {
      this.smsMsg = '已发送' + this.number + 's'
      this.numberChange()
    }
  },
  methods: {
    numberChange: function () {
      var n = this.number
      if (this.number > 1) {
        setTimeout(() => {
          n = n - 1
          this.number = n
        }, 1000)
      } else {
        this.smsMsg = '获取验证码'
      }
    },
    getSmsCode: function (event) {
      if (this.off) {
        if (this.number === 0) {
          this.number = 60
        } else {
          $.toast('已发送验证码', 'text')
        }
      }
    }
  }
}
</script>

<style>
.smsMsg
  color: #fff
</style>
